
<template>
  <div>
    <codemirror v-model="code" :options="cmOption" @input="inputChange"/>
  </div>
</template>

<script>
import dedent from 'dedent'
import { codemirror } from 'vue-codemirror'
// theme css
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/rubyblue.css'

export default {
  components: {
    codemirror
  },
  data () {
    return {
      val: '',
      code: dedent``,
      cmOption: {
        tabSize: 4,
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        mode: 'text/javascript',
        lineWrapping: true,
        theme: 'rubyblue'
      }
    }
  },
  methods: {
    setVal (content) {
      this.code = dedent`${content}`
    },
    getVal () {
      return this.val
    },
    inputChange (content) {
      this.$nextTick(() => {
        this.val = content
      })
    }
  }
}
</script>
